@media screen and (max-width: 1100px){
    .container {
        width: 100%;
        min-height: 100vh;
        position: absolute;
        z-index: 1;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto 5%;
        grid-template-areas: "main"
                            "footer"
                            ;
        overflow: hidden;
    }

    main {
        height: 100%;
    }

    .chooser-container .chooser-header {
        font-size: 2rem;
        text-align: center;
    }
    /* NAV */
    /* NAV */
    nav {
        /* Size */
        width: auto;
       
        /* Position */
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2;

        /* Grid */
        display: grid;

        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: "button";
    
        /* Grid Items */
        align-items: start;
        justify-items: start;       

        padding: 1rem;


   }

   #options-nav{
       align-items: end;
       justify-items: end;  

       right: 0;
       left: auto;

       gap: 1.5rem;
       
   }

   #options-nav-img {
       height: 3rem;
       width: 3rem;
       padding: .5rem;
       cursor: pointer;
   }

   #options-nav-a img{
       transition: transform .9s ease-in-out;

   }

   #options-nav-a:hover img{
       transform: scale(1.3) rotate(360deg);
   }

   #logout-nav {
       height: 50px;
       width: 50px;
       border-radius: 8rem;
       transition: transform .9s ease-in-out;
   }

   #logout-img {
       height: 3rem;
       width: 3rem;
       padding: .8rem;
       cursor: pointer;
       transition: transform .9s ease-in-out;
   }

   #logout-nav:hover {
       transform: scale(1.3);
   }

   


   nav img {
       height: 3rem;
       width: 3rem;

       grid-area: button;

   }

   nav .glass{
       border-radius: 6rem;

   }

   .page-header {
    grid-area: header;
    text-align: center;
}

    /* #################   Footer    ####################*/
    /* #################   Footer    ####################*/
    footer {
        grid-area: footer;
    }

        /* Footer ul */
        footer ul {
            
            /* Properties */
            margin: 0;
            display: flex;
            list-style-type: none;
            justify-content: center;
            padding: 0;
        }

            /* Footer Items */
            footer a {
                /* Properties */
                margin-top: auto;
                margin-bottom: 0;
                padding: 0 .5em 0 .5em;

                /* Animation */
                transition: color ease-in-out 250ms;
            }

            footer a:hover {
                /* Properties */
                color: var(--col4);
            }
}